<template>
  <div class="HomeMiddle">
    <!-- 左侧歌曲： -->
    <Middleleft
     class="left"
     :userPlayList="userPlayList"
     :myPlayList="myPlayList"
     :notMyPlayList="notMyPlayList"
     @getPlayListAll="getPlayListAll"
    />
    <!--
      右侧展示：
      展示区需要不同的组建
      不可用嵌套路由，传值场景不允许
    -->
    <MiddleRight
     class="right animate__animated"
     v-show="showMiddleRight"
     :class="showMiddleRight ? classIn : classOut"
     :userPlayList="userPlayList"
     :myPlayList="myPlayList"
     :notMyPlayList="notMyPlayList"
     @getPlayListAll="getPlayListAll"
    />
    <!-- 
      歌单详情展示
     -->
    <PlayListDetail
     v-show="showPlayListDetail"
     class="right animate__animated"
     :class="showPlayListDetail ? classIn : classOut"
     @getPlayListAll="getPlayListAll"
     @changeShowComponents="changeShowComponents"
     :playDetailInfo="playDetailInfo"
     :playListInfo="playListInfo"
    />
  </div>
</template>

<script>
import Middleleft from './MiddleLeft.vue'
import MiddleRight from './MiddleRight.vue'
import PlayListDetail from '../KgmHomePage/PlaylistDetail/PlayListDetail.vue'
import { getPlayListTrackAll } from '../../netWork/easeRequest/easePlaylistserver.js'

export default {
  name: 'Homemiddle',
  components: {
    Middleleft,
    MiddleRight,
    PlayListDetail,
  },

  props: {
    userPlayList: {
      type: Object
    },
    myPlayList: {
      type: Array
    },
    notMyPlayList: {
      type: Array
    }
  },

  data() {
    return {
      showPlayListDetail: false,
      showMiddleRight: true,
      // 歌单里面的歌曲信息
      playDetailInfo: '',
      classIn: 'animate__fadeInRight',
      classOut: 'animate__fadeOutRight',
      // 歌单的信息
      playListInfo: '',
    }
  },

  mounted() {
    
  },

  methods: {
    changeShowComponents(isShow) {
      if(isShow == 'showDetail') {
        this.showPlayListDetail = true
        this.showMiddleRight = false
      } else {
        this.showPlayListDetail = false
        this.showMiddleRight = true
      }
    },
    // 查询歌单详情
    getPlayListAll(playListInfo) {
      console.log('歌单信息', playListInfo)
      let that = this
      getPlayListTrackAll(playListInfo.id)
      .then( res => {
        console.log('歌单中的歌曲信息', res.data)
        if(res.data.code == '200') {
          that.playDetailInfo = res.data
          that.playListInfo = playListInfo
          // 调用方法，展示详情页面（切换组件
          that.changeShowComponents('showDetail')
        } else {
          that.$message({
            type: 'warning',
            message: '获取用户歌单信息异常'
          })
        }
      })

    },
  },
}

</script>

<style lang="less" scoped>

.HomeMiddle{
  display: flex;
  width: 100%;
  height: 47rem;
  justify-content: space-between;
  
  .left{
    width: 16%;
    // height: 80%;
    background: rgb(255, 255, 255);
    border-radius: 9px 0 0 9px;
    border-right: 1px solid #D4DCE6;
    overflow: scroll;
    // 隐藏滚动条
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  // 隐藏滚动条
  .left::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .right{
    width: 80%;
    // background: rgb(116, 253, 253);
    border-radius: 0 9px 9px 0;
  }
}
</style>